<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/css/remark.css">
</head>
<body>
    <h1>评论管理</h1>
    <div id="remark_content">

    </div>

    <script>
        $(document).ready(function () {
            loadData()
        })

        // 点击回复  TODO 管理员回复功能待完善
        $("body").on('click','.rep',function (event) {
            event.preventDefault();  // 阻止默认的 链接跳转行为 （阻止a标签内的跳转链接）
            var rep_content = prompt("请输入回复内容: ")
            if (rep_content !== null  &&  rep_content.trim() !== ""){
                alert("回复成功!")
            }else {
                alert("请输入有效字符!")
            }
        })


        // 点击删除
        $("body").on('click','.del',function (event) {
            event.preventDefault();  // 阻止默认的 链接跳转行为 （阻止a标签内的跳转链接）
            var res = confirm("确定要删除该评论吗？")
            if (res){
                $.ajax({
                    url: "/remark/del",
                    type: "post",
                    data:{
                        "type":$(this).parent().attr("type"),
                        "id":$(this).parent().attr("data"),
                    },
                    success:function () {
                        alert("删除成功!")
                        // TODO 这里 删除评论后 是刷新页面 导致 页面闪一下，后期优化！
                        document.getElementById('remark_content').innerHTML = ''
                        loadData()
                    },
                    error:function () {
                        alert("删除失败!")
                    },
                })
            }

        })


        // 加载 所有的 评论数据
        function loadData() {
            $.ajax({
                url:"/remark/All",
                type:"post",
                dataType:"json",
                success:function (data) {

                    const commentDiv = document.getElementById('remark_content'); // 获取 评论区的 div
                    // 楼主评论加载 TODO 管理员的评论管理：目前是 楼主和 回复 分开加载，后续改进为 一起加载
                    for (const rem of data.rem.Artrem){
                        const divTag = document.createElement("div"); // 每一个的 div
                        divTag.className = "OneRemark";
                        divTag.setAttribute("data", rem.id);
                        divTag.setAttribute("type", 0);

                        const pTag1 = document.createElement("div");  // 第一行的
                        pTag1.className = "author";
                        pTag1.textContent = rem.name + "  回复了你的文章: "

                        const aTag1 = document.createElement("a"); // 评论的 文章
                        aTag1.href="/article?id="+rem.art_id;
                        aTag1.target = "_black";
                        aTag1.textContent = rem.title;

                        pTag1.appendChild(aTag1)

                        const pTag2 = document.createElement("div");  // 回复的时间
                        pTag2.className = "meta";
                        pTag2.textContent = "评论时间: " + rem.create_time;

                        const pTag3 = document.createElement("div");  // 回复的内容
                        pTag3.className = "content";
                        pTag3.textContent = rem.content;

                        const divTag1 = document.createElement("div");  // 进行的操作
                        divTag1.className = "actions";
                        divTag1.setAttribute("data", rem.id);
                        divTag1.setAttribute("type", 0);

                        const but1 = document.createElement("button")
                        but1.className = "rep"
                        but1.textContent = "回复"
                        const but2 = document.createElement("button")
                        but2.className = "del"
                        but2.textContent = "删除"
                        // divTag1.appendChild(but1)
                        divTag1.appendChild(but2)

                        divTag.appendChild(pTag1)
                        divTag.appendChild(pTag2)
                        divTag.appendChild(pTag3)
                        divTag.appendChild(divTag1)

                        commentDiv.appendChild(divTag)

                    }

                    //  第二种  回复评论加载
                    for (const rem of data.rem.Remarkreply){

                        const divTag = document.createElement("div"); // 每一个的 div
                        divTag.className = "OneRemark";
                        divTag.setAttribute("data", rem.id);
                        divTag.setAttribute("type", 0);

                        const pTag1 = document.createElement("div");  // 第一行的
                        pTag1.className = "author";
                        pTag1.textContent = rem.user_name + "  回复了你的文章: "

                        const aTag1 = document.createElement("a"); // 评论的 文章
                        aTag1.href="/article?id="+rem.aid;
                        aTag1.target = "_black";
                        aTag1.textContent = rem.title;

                        pTag1.appendChild(aTag1)

                        const pTag2 = document.createElement("div");  // 回复的时间
                        pTag2.className = "meta";
                        pTag2.textContent = "评论时间: " + rem.create_time;

                        const pTag3 = document.createElement("div");  // 回复的内容
                        pTag3.className = "content";
                        pTag3.textContent = rem.reply_content;

                        const divTag1 = document.createElement("div");  // 进行的操作
                        divTag1.className = "actions";
                        divTag1.setAttribute("data", rem.id);
                        divTag1.setAttribute("type", 1);

                        const but1 = document.createElement("button")
                        but1.className = "rep"
                        but1.textContent = "回复"
                        const but2 = document.createElement("button")
                        but2.className = "del"
                        but2.textContent = "删除"
                        // divTag1.appendChild(but1)
                        divTag1.appendChild(but2)

                        divTag.appendChild(pTag1)
                        divTag.appendChild(pTag2)
                        divTag.appendChild(pTag3)
                        divTag.appendChild(divTag1)

                        commentDiv.appendChild(divTag)
                    }

                },
                error:function () {
                    alert("所有评论数据加载失败!")
                }
            })
        }

    </script>
</body>
</html>